<!DOCTYPE html>
<html lang="zh-cn">

	<head>
		<meta charset="utf-8">
		<meta http-equiv="X-UA-Compatible" content="IE=edge">
		<meta name="viewport" content="width=device-width, initial-scale=1">
		<title>数据</title>
		<link href="css/bootstrap.min.css" rel="stylesheet">
		<link rel="stylesheet" type="text/css" href="css/index.css" />
		<link rel="stylesheet" type="text/css" href="js/jedate/skin/jedate.css" />
		<!--[if lt IE 9]>
      <script src="js/html5shiv.min.js"></script>
      <script src="js/respond.min.js"></script>
    <![endif]-->
		<style type="text/css">
			.data_img {
				text-align: center;
				color: #fff;
				/*font-weight: bold;*/
				font-size: 14px;
			}
			
			.d_i_div {
				widows: 90%;
				margin: 0 auto;
			}
			
			.data_img .d_i_div .data_img_i {
				background: url(images/numbers-style2-big.png) no-repeat center center;
				width: 20%;
				height: 24px;
				display: inline-block;
				margin: 12% 0 6% 0;
				background-size: cover;
			}
			
			.data_img .d_i_div p {
				padding-bottom: 5%;
			}
			
			.data_img .d_i_div .d_img_touzi {
				background: url(images/numbers-style1-big.png) no-repeat center center;
				background-size: cover;
				width: 18%;
			}
			
			.d_touzi {
				background: #f34060;
			}
			
			.d_yuanyou {
				background: #3dcaa4;
			}
			
			.d_rongzi {
				background: #f13b5a;
			}
			
			.d_zong {
				background: #d652d9;
			}
		</style>
	</head>

	<body>
		<!-- 头部导航 -->
		<header></header>
		<!--<nav class="navbar navbar-default" role="navigation">
			<div class="container">
				<div class="navbar-header">
					<button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navs">
				        <span class="sr-only">Toggle navigation</span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				        <span class="icon-bar"></span>
				    </button>
					<a class="navbar-brand" href="index.html"><img src="Web/切图（第五周交付）/splash-ic.png" width="55" height="55" alt="logo" id="logo_img" /></a>
				</div>
				<div class="collapse navbar-collapse" id="navs">
					<ul class="nav navbar-nav navbar-right">
						<li>
							<a href="index.html" target="_blank" class="nav_a"><span class="glyphicon li_active"><img src="Web/切图（第五周交付）/tabbar-news-f.png"/></span>热点</a>
						</li>
						<li>
							<a href="viewpoint.html" target="_blank" class="nav_a"><span class="glyphicon li_active"><img src="Web/切图（第五周交付）/tabbar-paper-n.png"/></span>观点</a>
						</li>
						<li class="active">
							<a href="data.html?country=CN,US,JP&indicator=NY.GDP.MKTP.CD" target="_blank" class="nav_a"><span class="glyphicon li_active"><img src="Web/切图（第五周交付）/tabbar-numbers-n.png"/></span>数据</a>
						</li>
						<li class="dropdown">
							<a href="#" class="dropdown-toggle nav_a" data-toggle="dropdown"><span class="glyphicon"><img src="Web/切图（第五周交付）/n.png"/></span>我的 <span class="caret"></span></a>
							<ul class="dropdown-menu" role="menu">
								<li class="dropdown-header">登录</li>
								<li class="dl_style">
									<a href="javascript:void(0);" class="login_wechat">微信扫码</a>
								</li>
								<li class="dl_style">
									<a href="javascript:void(0);" class="login_phone">手机号</a>
								</li>
								<li>
									<a href="add_viewpoint.html" target="_blank">发布观点</a>
								</li>
								<li>
									<a href="my_viewpoint.html" target="_blank">历史观点</a>
								</li>
							</ul>
						</li>
					</ul>
				</div>
			</div>
		</nav>-->
		<!-- 头部导航结束  -->

		<div id="wx_phone">
			<!-- 手机号登陆  -->
			<div id="phone">
				<div class="modal-dialog modal_style">
					<div class="modal-content">
						<div class="modal-body">
							<p class="modal_style_title">手机登录</p>
							<form role="form">
								<div class="form-group fg">
									<a class="btn btn-info btn-sm btn-block none" id="phone_error">手机格式不正确！重新输入</a>
									<input type="text" class="form-control" id="input_Phone" placeholder="请输入手机号">
									<!--<input type="password" class="form-control" id="input_password" placeholder="请输入密码">-->
									
									<input type="text" class="form-control form-group-sm " id="input_Phone_code" placeholder="请输入验证码">
									<a class="btn btn-info btn-sm btn-block none" id="code_btn1"><span id="code_num"><i>60</i>后可重新</span>获取验证码</a>
									<input type="button" class="btn btn-primary btn-sm btn-block " id="code_btn"  data-placement="bottom" value="获取验证码" />
								</div>
								<!--<input type="button" class="btn modal_style_btn btn_next fg" value="下一步">-->
								<input type="button" class="btn btn-success btn-block modal_style_btn btn_login phone_code_login" value="登录">
								<p id="wechat_tag">
									<!--<a href="javascript:void(0)" data-toggle="modal" data-target="#PhoneCode" class="phone_code">手机验证码登录<span class="glyphicon glyphicon-play"></span></a>-->
									<a href="javascript:void(0)" data-toggle="modal" data-target="#Phone" class="phone_no fg_hide">手机号登录<span class="glyphicon glyphicon-play"></span></a>
									<a href="javascript:void(0)" data-toggle="modal" data-target="#WeChat" id="aaa" class="">微信登录<span class="glyphicon glyphicon-play"></span></a>
								</p>
							</form>
						</div>
					</div>
				</div>
			</div>
			<!-- 微信登陆  -->
			<div id="WeChat">
				<div class="modal-dialog modal_style">
					<div class="modal-content">
						<div class="modal-body">
							<p class="modal_style_title">扫码登录</p>
							<form role="form">
								<div class="form-group" id="wx">
									<img src="images/erweima.png" alt="微信扫码" />
								</div>
								<p id="wechat_tag">
									<a href="javascript:void(0)" data-target="#Phone" class="">手机登录<span class="glyphicon glyphicon-play"></span></a>
								</p>
							</form>
						</div>
					</div>
				</div>
			</div>
		</div>

		<!-- 数据内容 -->
		<div class="container" id="datas">
			<div class="row" style="margin-right: 0;">
				<div class="col-md-2 data_img">
					<!--<img src="images/touzi.png" alt="投资" />-->
					<div class="d_i_div d_touzi">
						<i class="data_img_i d_img_touzi" style=""></i>
						<p>投资增速</p>
					</div>
				</div>
				<div class="col-md-2 data_img">
					<div class="d_i_div d_yuanyou">
						<i class="data_img_i d_img_yuanyou" style=""></i>
						<p>原油期货</p>
					</div>
				</div>
				<div class="col-md-2 data_img">
					<div class="d_i_div d_rongzi">
						<i class="data_img_i d_img_rongzi" style=""></i>
						<p>融资规模</p>
					</div>
				</div>
				<div class="col-md-2 data_img">
					<div class="d_i_div d_zong">
						<i class="data_img_i d_img_zong" style=""></i>
						<p>运输总量</p>
					</div>
				</div>
				<div class="col-md-2 data_img">
					<div class="d_i_div d_touzi">
						<i class="data_img_i d_img_touzi" style=""></i>
						<p>投资增速</p>
					</div>
				</div>
				<div class="col-md-2 data_img">
					<div class="d_i_div d_yuanyou">
						<i class="data_img_i d_img_yuanyou" style=""></i>
						<p>原油期货</p>
					</div>
				</div>
			</div>
			<div class="row" id="data_border">
				<div class="db data_border">
					<div></div>
				</div>
				<div class="db ">
					<div></div>
				</div>
				<div class="db ">
					<div></div>
				</div>
				<div class="db ">
					<div></div>
				</div>
				<div class="db ">
					<div></div>
				</div>
				<div class="db " style="margin-right: 0;">
					<div></div>
				</div>
			</div>
		</div>

		<div class="container" id="data_desc">
			<div class="row">
				<p>数据显示设置:</p>
				<select class="form_indicator form_style col-md-3" id="indicator">
					<option>GDP</option>
					<!--<option>2017年</option>-->
				</select>
				<input type="text" id="year" hidden="hidden">
				<select class="form_country form_style col-md-3" id="countrys">
					<option>国家</option>
					<!--<option>中国</option>
					<option>美国</option>
					<option>德国</option>
					<option>法国</option>-->
				</select>
				<select class="form_country form_style  col-md-2" id="start_year">
					<option>开始年份</option>
					
				</select>
				<select class="form_country form_style col-md-2" id="end_year">
					<option>结束年份</option>
					
				</select>
				<i style="background: url(images/more-info@2x.png);display: inline-block;width: 40px;height: 40px;float: right;background-size: cover;"></i>
				<div class="clearfix"></div>
			</div>
			<div id="echarts_main" style="min-height: 500px;margin: 50px 0;"></div>
			<small style="color: #999999;">来源： <span class="source"> 经济日报  </span></small>
		</div>
		<footer><div id="footer_" class="container">
	版权©&nbsp;2017&nbsp;
	<p id="back_top">∧</p>
</div></footer>
		<script src="js/jquery1.9.1.min.js"></script>
		<script src="js/echarts.js"></script>
		<script src="js/bootstrap.min.js"></script>
		<!--日期控件引入-->
		<script type="text/javascript" src="js/jedate/jquery.jedate.min.js"></script>
		<script type="text/javascript" src="js/index.js"></script>
		<script type="text/javascript">
			$("header").load("header.html");
			$("footer").load("footer.html");
			$(function() {
				setTimeout(function(){
					console.log($("#navs li").length)
					$("#navs li").eq(2).addClass("active").siblings().removeClass("active");
				},500);
				//接口
				var _href = "http://api.jjrb.grsx.cc",
					interfacelist = {
						select_indicator: "/data/indicator/k/", //查询indicator
						select_data: "/data", //查询数据   ?country=CN,US&indicator=NY.GDP.MKTP.CD&start=1990
						host_indicator: "/data/indicator/hot", //热门
						select_country: "/data/country/k/",//查询国家/data/country/k/{val}
						wx: "/login/wx"//微信登录post expire_in=&open_id=&	token=&refresh_token=	
					};
				
/*				//时间
				$(document).on("click",".form_year",function(){
					$("#year").click();
					if ($("#year").val()) {
						$(this).append("<option selected='selected'>"+$("#year").val()+"</option>");
					}
				});
				$("#year").jeDate({//时间插件调用
					isinitVal: false,
					festival: true,
					ishmsVal: false,
					format: "YYYY",
					zIndex: 3000,
				})*/
				var year = "";
				$(".form_year").change(function(){
					year = $(this).val();
					console.log(year);
				});
				
				var u = getUrlParams();
				country = u.country,
			    indicator = u.indicator,
			    start = u.start,
			    end = u.end;
			    var _url = _href + interfacelist.select_data+"?";//'data.json';//
//			    urlLoad("echarts_main",_url,u.country,u.indicator,u.start,u.end);
//			    if (country) {
//			    	urlLoad("echarts_main",_url,country,indicator,start,end);
//			    }else{
//			    	$(document).on("change",".form_country",function(){
//			    		var country = $(this).val();
			    		console.log(country);
//			    		urlLoad("echarts_main",_url,country,indicator,start,end);
//			    	});
//			    	
//			    }
 				//国家
				$.ajax({
					type:"get",
					url: _href + interfacelist.select_country+"中",
					async:true,
					success: function(data){
						console.log(data);
						$(data).each(function(i,e){
//							console.log(e);
							var html = "<option value='"+e.iso2_code+"'>"+e.name+"</option>"
							$("#countrys").append(html);
						});
					},
					error: function(){
						
					}
					
				});
				//经济指标
				$.ajax({
					type:"get",
					url: _href + interfacelist.select_indicator+"gd",
					async:true,
					success: function(data){
//						console.log(data);
						$(data).each(function(i,e){
							var name = e.name_cn;
							if(name==null)name=e.name;
							var html = "<option value='"+e.id+"'>"+name+"</option>"
							$("#indicator").append(html);
						});
					},
					error: function(){
						
					}
					
				});
				var endyear = new Date().getFullYear(),yearhtml;
				for(var i=100;i>0;i--){
					yearhtml+="<option value='"+endyear+"'>"+endyear+"年</option>";
					endyear--;
				}
				$("#start_year,#end_year").append(yearhtml);
				
				$(document).on("change","#countrys,#indicator,#start_year,#end_year",function(){
					if ($(this).attr("id")=="countrys") {
						country = $(this).val();
//						_url += "&country="+country;
						urlLoad("echarts_main",_url,country,indicator,start,end);
					}
					if ($(this).attr("id")=="indicator") {
						indicator = $(this).val();
//						_url += "&indicator="+indicator;
						urlLoad("echarts_main",_url,country,indicator,start,end);
					}
					if ($(this).attr("id")=="start_year") {
						start = $(this).val();
//						_url += "&start="+start;
						urlLoad("echarts_main",_url,country,indicator,start,end);
					}
					if ($(this).attr("id")=="end_year") {
						end = $(this).val();
//						_url += "&end="+end;
						urlLoad("echarts_main",_url,country,indicator,start,end);
					}
					
				});
			});
			
		</script>
	</body>

</html>